<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
      img {
        width: 230px;
        height: 190px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <img :src="imageUrl[index]" />
      <a href="#" @click="prev" v-show="true">上一页</a>
      <a href="#" @click="next" v-show="true">下一页</a>
    </div>
    <!-- <img src="../image/back1.jpg" alt="" />
    <img src="../image/back2.jpg" alt="" />
    <img src="../image/bg1.jpg" alt="" />
    <img src="../image/QQ星空.jpg" alt="" />
    <img src="../image/埃菲尔铁塔.jpg" alt="" /> -->
    <script>
      let m = 5
      let num = 1
      new Vue({
        el: '#app',
        data: {
          imageUrl: [
            '../image/back1.jpg',
            '../image/back2.jpg',
            '../image/bg1.jpg',
            '../image/QQ星空.jpg',
            '../image/埃菲尔铁塔.jpg',
          ],
          index: 0,
        },
        methods: {
          prev: function () {
            if (this.index <= 0) {
              return (this.index = 4)
            } else {
              this.index--
            }
          },
          next: function () {
            if (this.index >= 4) {
              return (this.index = 0)
            } else {
              this.index++
            }
          },
        },
      })
    </script>
  </body>
</html>
